<!--
 * @Description:
 * @Author: yyh
 * @Date: 2021-06-24 16:10:48
 * @LastEditors: yyh
 * @LastEditTime: 2021-06-28 10:43:40
-->
<template>
  <!-- 员工详情页 -->
  <div class="waiter_details">
    <!-- 头像 -->
    <div class="userface">
      <div class="photo">
        <div class="box">
          <img :src="form.userFace" alt="">
        </div>
      </div>
      <div style="padding-top: 50px; text-align: right">
        <el-button size="small" type="text" @click="toChangeUserface">修改头像</el-button>
      </div>
    </div>
    <!-- 员工信息 -->
    <div class="info">
      <el-form label-width="100" size="small">
        <el-form-item label="登录用户"> {{ form.username }} </el-form-item>
        <el-form-item label="用户姓名"> {{ form.realname }} </el-form-item>
        <el-form-item label="用户手机"> {{ form.telephone }} </el-form-item>
        <el-form-item label="用户性别">
          <div v-if="form.gender">
            <span v-if="form.gender==='male'">男</span>
            <span v-else-if="form.gender==='female'">女</span>
            <span v-else>--</span>
            <i v-if="form.gender==='male'" class="el-icon-male green_info" />
            <i v-else-if="form.gender==='female'" class="el-icon-female red_info" />
          </div>
          <div v-else>暂无</div>
        </el-form-item>
        <el-form-item label="用户角色"> {{ form.roles[0].name }} </el-form-item>
        <el-form-item label="用户生日"> {{ form.birth | fmtDate }}</el-form-item>
        <el-form-item label="注册时间">
          {{ form.registerTime | fmtDate }}
        </el-form-item>
        <el-form-item label="邮箱"> {{ form.email || '暂无' }} </el-form-item>
        <el-form-item label="用户状态">
          <el-tag
            :type="form.status==='正常'?'success':'danger'"
          >{{ form.status }}</el-tag>
        </el-form-item>
        <!-- <el-form-item label="用户状态">
          <el-tag size="small">{{ form.status }}</el-tag>
        </el-form-item> -->
      </el-form>
    </div>
    <!-- 修改个人信息 -->
    <div style="text-align:right;padding-right:200px;border-top:1px solid #f4f4f4">
      <el-button size="small" type="text" @click="toChangeInfo">修改个人信息</el-button>
    </div>
    <!-- 个人信息模态框 (更改个人信息)-->
    <el-dialog title="修改个人信息" :visible.sync="visible" width="50%" class="waiter_modal" @close="toClose">
      <el-form ref="ruleForm" size="medium" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="登录用户">
          <el-input disabled :placeholder="form.username" />
        </el-form-item>
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="form.realname" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="form.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户手机" prop="telephone">
          <el-input v-model="form.telephone" />
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="出生日期" prop="email" :label-width="formLabelWidth">
          <el-date-picker v-model="riqi" type="date" placeholder="选择出生日期" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible = false">取 消</el-button>
        <el-button type="primary" size="small" @click="toSave">确定修改</el-button>
      </div>
    </el-dialog>
    <!-- 个人信息模态框 (更改个人头像)-->
    <el-dialog title="更改头像" :visible.sync="visible_userface" width="50%" class="waiter_modal">
      <el-form size="medium" :model="form" label-width="80px">
        <el-form-item prop="userFace" label="头像" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            :action="uploadFileURL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
          <span style="color:red">请上传头像</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible_userface = false">取 消</el-button>
        <el-button type="primary" size="small" @click="toSaveUerFace">确定修改</el-button>
      </div>
    </el-dialog>
    <!-- 返回上一页面 -->
    <div style="text-align: right">
      <el-button size="small" type="primary" @click="$router.back()">返回</el-button>
    </div>
  </div>
</template>

<script>
import { saveOrUpdate, findUserDetailsById, alterUserface } from '@/api/user'
import { showFileURL, uploadFileURL } from '@/utils/config'
import _ from 'lodash'

export default {
  data() {
    return {
      showFileURL,
      uploadFileURL,
      form: {
        roles: [0]
      },
      userface: '',
      // 模态框的显示与隐藏
      // 隐藏
      visible: false,
      visible_userface: false,
      // 图片url
      imageUrl: '',
      // 出生日期
      riqi: '',
      formLabelWidth: '80px',
      rules: {
        realname: [
          {
            required: true,
            message: '请输入用户真实姓名',
            trigger: 'blur'
          }
        ],
        gender: [
          {
            required: true,
            message: '请输入性别',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {},
  created() {
    this.userData()
  },
  mounted() {},
  methods: {
    // 获取当前用户信息
    async userData() {
      // 处理数据
      const temp = {
        id: this.$route.query.id
      }
      const res = await findUserDetailsById(temp)
      this.form = res.data
    },
    // 修改个人头像
    toChangeUserface() {
      this.imageUrl = this.form.userface
      this.visible_userface = true
    },
    // 修改个人信息
    toChangeInfo() {
      this.form = _.clone(this.form)
      this.visible = true
    },

    // 图片上传成功的回调函数
    handleAvatarSuccess(res, file) {
      // console.log(res, "==图片上传成功之后的res");
      this.imageUrl = URL.createObjectURL(file.raw)
      this.userface = showFileURL + res.data.id
    },
    // 图片上传之前的回调函数
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 模态框修改个人信息确定修改按钮事件处理程序
    toSave() {
      // 获取dom的值，对值进行校验 form.name
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          // this.form;
          this.form.birth = Number(this.riqi)
          const res = await saveOrUpdate(this.form)
          // 提示用户保存成功，刷新表格数据，关闭模态框
          this.$notify.success({
            title: '成功',
            message: res.message
          })
          this.userData()
          // this.toClose();
          this.visible = false
        } else {
          // 校验不通过
          return false
        }
      })
    },
    // 模态框修改头像确定修改按钮事件处理程序
    async toSaveUerFace() {
      const a = {
        userface: this.userface,
        id: this.form.id
      }
      const res = await alterUserface(a)
      // 提示用户保存成功，刷新表格数据，关闭模态框
      this.$notify.success({
        title: '成功',
        message: res.message
      })
      this.userData()
      this.visible_userface = false
    },
    toClose() {
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>
<style lang='scss' scoped>
.userface {
  display: flex;
  padding: 1em 200px;
  & > div {
    flex: 1;
  }
  .photo {
    .box {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  border-bottom: 2px solid #f4f4f4;
  margin-bottom: 1em;
}
</style>
